.toasted {
  padding: 0 20px;

  // Templates
  &.rounded {
    border-radius: 24px;
  }

  // Primary
  &.toasted-primary, .primary {
    border-radius: 2px;
    min-height: 38px;
    line-height: 1.1em;
    background-color: #353535;
    padding: 6px 20px;
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

    &.success {
      background: #4CAF50;
    }

    &.error {
      background: #F44336;
    }

    &.info {
      background: #3F51B5;
    }

    .action {
      color: #a1c2fa;
    }
  }

  // Bubble
  &.bubble {
    border-radius: 30px;
    min-height: 38px;
    line-height: 1.1em;
    background-color: #FF7043;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

    &.success {
      background: #4CAF50;
    }

    &.error {
      background: #F44336;
    }

    &.info {
      background: #3F51B5;
    }

    .action {
      color: #8e2b0c;
    }
  }

  &.outline {
    border-radius: 30px;
    min-height: 38px;
    line-height: 1.1em;
    background-color: white;
    border: 1px solid #676767;
    padding: 0 20px;
    font-size: 15px;
    color: #676767;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-weight: bold;

    &.success {
      color: #4CAF50;
      border-color: #4CAF50;
    }

    &.error {
      color: #F44336;
      border-color: #F44336;
    }

    &.info {
      color: #3F51B5;
      border-color: #3F51B5;
    }

    .action {
      color: #607d8b;
    }
  }
}